<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:replace="page/index::head">
    <meta charset="UTF-8">
    <title>商品积分管理</title>
    <script src="../../static/lib/layui-v2.5.5/layui.all.js"></script>
</head>
<body class="layui-layout-body layuimini-all">

<div class="layui-layout layui-layout-admin">
    <div class="layui-header header" th:replace="page/index::nav"></div>
    <div class="layui-side layui-bg-black" th:replace="page/index::left"></div>
    <div class="layui-body">
        <div class="layuimini-content-page ">
            <!--初始化中间内容 welcome页面-->
            <div id="content-mid" class="layui-container content">
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" th:action="@{/product/list/}" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品类别</label>
                            <div class="layui-input-inline">
                                <select name="categoryId" lay-verify="required">
                                    <option th:each="category:${categoryList}" th:text="${category.categoryName}" th:value="${category.categoryId}">北京</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit=""
                                        lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                                </button>
                            </div>
                        </div>

                    </form>
                </div>

                <div class="layui-btn-container">
                    <button style="float: right" class="layui-btn layui-btn-warm layui-btn-sm data-add-btn"
                            lay-event="add"> 添加商品积分
                    </button>
                </div>

                <div class="layui-btn-container">
                    <button style="float: left" class="layui-btn layui-btn-checked layui-btn-sm add-category"
                            lay-event="add"> 添加商品分类
                    </button>
                </div>

                  <table class="layui-table ">
                      <thead>
                      <tr>
                          <td>编号</td>
                          <td>商品名称</td>
                          <td>单商品积分</td>
                          <td>商品类别</td>
                          <td>更新时间</td>
                          <td>操作</td>
                      </tr>
                      </thead>
                      <tbody>
                      <tr th:each="productInfo,productInfoStat:${pageInfo.list}">
                          <td th:text="${productInfoStat.count}"></td>
                          <td class="productName" th:text="${productInfo.productName}"></td>
                          <td class="productScore" th:text="${productInfo.productScore}"></td>
                          <td th:text="${productInfo.category.categoryName}"></td>
                          <td th:text="${#dates.format(productInfo.updateTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                          <td>
                              <div class="layui-table-cell laytable-cell-1-0-10">
                                  <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">修改积分</a>
                                  <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete"
                                     th:href="@{/product/del/(productId=${productInfo.productId})}"
                                     lay-event="delete">删除</a>
                              </div>
                          </td>

                      </tr>
                      </tbody>
                      <!--分页信息-->
                      <div style="width: 1170px;height: 150px;position: absolute;top: 460px;left: 0px;">
                          <a class="layui-btn layui-btn-normal prePage" th:if="${pageInfo.hasPreviousPage}"
                             style="float: left"
                             th:href="@{/product/list(pageNum=${pageInfo.pageNum-1})}">上一页</a>
                          <div style="left: 500px;width: 100px;height: 50px;position: absolute">
                              当前第<a>&nbsp;<span class="layui-laypage-curr" id="currentPage"
                                                th:text=" ${pageInfo.pageNum} "></span>&nbsp;</a>页
                              <p>共<span th:text="${pageInfo.pages}"></span>页</p>
                          </div>
                          <a class="layui-btn layui-btn-normal nextPage"th:if="${pageInfo.hasNextPage}"
                             style="float: right"
                             th:href="@{/product/list(pageNum=${pageInfo.pageNum+1})}">下一页</a>
                          <p class="errorMag" style="width: 318.4px;height: 30px;padding-top: 40px;padding-left:350px; text-align: center;color: crimson" th:text="${errorMsg}"></p>
                      </div>

                  </table>
            </div>


        </div>
    </div>
</div>


</div>

<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" src="../../static/lib/jquery-3.4.1/jquery-3.4.1.min.js"
        charset="utf-8"></script>
<script th:src="@{/lib/layui-v2.5.5/layui.js}" src="../../static/lib/layui-v2.5.5/layui.js?v=1.0.4"
        charset="utf-8"></script>
<script th:src="@{/lib/layui-v2.5.5/layui.all.js}" src="../../static/lib/layui-v2.5.5/layui.js?v=1.0.4"
        charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" src="../../static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript">

    layui.use(['layer', 'layuimini'], function () {
        $('.login-out').on("click", function () {
            layer.msg('正在退出登录', function () {
                window.location = '/user/logout';
            });
        });
        /* layuimini.listen();*/
    });

    $('.data-count-edit').on("click",function () {
        var pname = $(this).parents("div").parents("tr").find('.productName').text();
        var pscore = $(this).parents("div").parents("td").parents("tr").find('.productScore').text();
       /* alert(pscore);
        alert(pname);*/
        $('.pName').attr('value',pname);
        $('#pScore').attr('value',pscore);

        layer.prompt({
            type: 1,
            content: $('#updateForm'),
            area: ['500px','300px'],
            title: '修改商品积分',
            btnAlign: 'c',
            yes: function (index, layero) {
                // 获取文本框输入的值
                var value = layero.find("#pScore").val();
                value = Number(value);
                var pName = layero.find(".pName").val();
                if (value!=null&&value!='') {
                   // alert("输入值为：" + value + pName);
                    //发送ajax请求修改积分
                    updateScore(value,pName);
                    layer.close(index);
                } else {
                    layer.msg("积分不能为空");
                }
            }
        });
    });
    /*修改积分，提交数据*/
    function updateScore(score,productName){
        $.post("/product/update?score="+score+"&productName="+productName+"",function(result) {
            console.log(result);
            if (result.status!=0){
                layer.msg(result.msg);
            }
            window.location.href="/product/list";
        });
    }
    /*增加商品和对应的积分*/
    $('.data-add-btn').click(function () {
        window.location.href="/product/toAddPage";
    })

    /*添加分类*/
    $('.add-category').click(function () {
        $(".categoryName").val('');
        layer.prompt({
            type: 1,
            content: $('#addCategory'),
            area: ['500px','300px'],
            title: '添加商品类别',
            btnAlign: 'c',
            yes: function (index, layero) {
              var categoryName=layero.find('.categoryName').val();
              //发送请求
                $.post("/category/addCategory",
                    {categoryName:categoryName},
                    function (result) {
                        if (result.status==0){
                            layer.alert('添加分类成功',{icon: 6},function () {
                                layer.closeAll();
                                window.location.reload();
                            });
                        }else {
                            layer.msg('添加失败',{icon:5});
                        }
                });
            }
        });
    })
    /*头像上传*/
    $(".uploadAvatar").click(function () {
        layer.open({
            type: 1
            , title: '上传头像' //不显示标题栏
            , closeBtn: 2
            , area: '300px;'
            , id: 'upload-avatar' //设定一个id，防止重复弹出
            , resize: false
            , btnAlign: 'c'
            , moveType: 1 //拖拽模式，0或者1
            , content: $(".magt3")

        });
        layui.use('upload', function () {
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#test1'
                ,auto:true

                , url: '/user/projectPictureUpload'
                , method: 'post'
                , accept: 'images'
                , acceptMime: 'image/*'
                , field: 'projectImg'
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $("#demo1").attr('src',result);
                    })}
                , done: function (res) {
                    //如果上传失败
                    if (res.status == 1) {
                        return layer.msg('上传项目图片失败', {icon: 5});
                    }
                    //上传成功,获得图片地址
                    console.log(res.data);

                    $('.avatar').attr('src', res.data);
                    layer.closeAll();
                    // window.location.reload();
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    });

</script>
</body>

<!--修改商品积分表单-->
<div  class="layui-form layui-form-pane" id="updateForm">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input pName"  readonly="readonly"  name="productName" lay-verify="required" >
        </div>

        <label class="layui-form-label">商品积分</label>
        <div class="layui-input-inline">
            <input id="pScore" type="text" class="layui-input "   name="productScore" lay-verify="required" >
        </div>
    </div>
</div>
<!--添加分类名称-->
<div class="layui-form layui-form-pane" id="addCategory">
    <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input categoryName"   name="categoryName" lay-verify="required" >
        </div>
    </div>
</div>
<!--上传头像框-->
<div class="layui-form layui-form-item magt3">

    <div class="layui-upload">
        <button type="button" class="layui-btn" style="margin-left: 100px;" id="test1">选择图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" style="margin-left:80px;width: 140px;height: 115px;">
            <p id="demoText"></p>
        </div>

    </div>

</div>
</html>